<template>
  <div>
    <div class="g-card">
      <div class="h1-title">企微群群发</div>
      <!-- 搜索栏 -->
      <el-row>
        <el-col :span="24" class="homme-pad20">
          <el-input
            v-model="query.greetingName"
            placeholder="请输入群发名称"
            style="width: 180px; display: inline-block; vertical-align: bottom"
          >
            <i slot="suffix" class="el-icon-search"></i>
          </el-input>

          <mechanism-cascader
            style="margin-left: 15px"
            :deptId.sync="query.deptId"
          ></mechanism-cascader>
          <created-cascader
            placeholder="请选择创建人"
            ref="createdBy"
            :queryCreateList="queryCreateList"
            @select="selectOptions"
          ></created-cascader>
          <div class="serch-btn-nowrap">
            <div>
              <el-button
                type="cyan"
                icon="el-icon-search"
                @click="queryTaskList"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh" @click="resetQuery" plain  >重置</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="g-card">
      <div class="right-btn">
        <el-button
          icon="el-icon-plus"
          type="primary"
          size="mini"
          style="height: 32px; margin-left: 80px"
          @click="addGroup"
          >新建群发
        </el-button>
      </div>
      <!-- 表格 -->
      <div style="padding: 0px 20px 20px 20px">
        <el-table
          v-loading="loading"
          :data="tableList"
          style="width: 100%"
          height="415"
        >
          <el-table-column type="selection" width="45" align="center" fixed>
          </el-table-column>
          <el-table-column
            type="index"
            width="55"
            align="center"
            label="序号"
          />
          <el-table-column
            label="群发名称"
            align="center"
            prop="groupName"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="群发类型"
            align="center"
            prop="useNumber"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <div v-if="row.groupType">
                <el-tag type="success" v-if="row.groupType === '0'"
                  >立即发送</el-tag
                >
                <el-tag type="success" v-if="row.groupType === '1'">
                  定时发送</el-tag
                >
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="创建人" align="center" prop="creator">
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            show-overflow-tooltip
            width="160px"
          >
          </el-table-column>
          <el-table-column
            label="群发内容"
            align="center"
            prop="groupContent"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column label="已发送群主" align="center" prop="sendNumber">
          </el-table-column>

          <el-table-column label="送达群聊" align="center" prop="groupNumber">
          </el-table-column>

          <el-table-column label="未发送群主" align="center" prop="groupNumber">
          </el-table-column>

          <el-table-column label="未发送群聊" align="center" prop="groupNumber">
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <div class="option-span">
                <span @click="reminder(row)">提醒发送</span>
                <span @click="send(row)">推送</span>
                <span @click="detail(row)">详情</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <NormalPagination :currentPage="query.pageNum" :pageSize="query.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      </div>
    </div>
  </div>
</template>
      <script>
import { createdCascader, mechanismCascader } from "@/components/index.js";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { queryDeptMsg, queryUserMsg } from "@/api/communityOperating/personalSop";

export default {
  name: "friendNotes",
  components: { createdCascader, mechanismCascader },
  data() {
    const nameValidate = (rule, value, callback) => {
      const reg = /^[\w\u4E00-\u9FA5\_\-\.\:\@\#\*\/]+$/;
      if (value) {
        // if (!reg.test(value)) {
        //   callback(new Error("只能包含汉字、英文、数字、或者（.:_-@#*）"));
        // } else {
        //   callback();
        // }
        if (value.length > 32) {
          callback(new Error("您录入字数超过32字"));
        } else {
          callback();
        }
      } else {
        callback(new Error("请输入好友备注"));
      }
    };
    return {
      queryCreateList: [],
      modifyForm: {
        remark: "",
      },
      saveLoading: false,
      modifyVisible: false,
      value: "",
      total: 0,
      loading: false,
      tableList: [
        {
          groupName: "hhh",
        },
      ],
      query: {
        greetingName: "",
        groupManager: "",
        tag: "",
        createList: [], // 创建人
        deptId: null, // 管理机构id
        pageNum: 1,
        pageSize: 20,
      },
      staffOptions: [], // 创建人
      ruleList: [], // 任务名称
      managerOption: [
        {
          label: "哈哈1",
          value: "0",
        },
        {
          label: "哈哈123",
          value: "1",
        },
      ], //群主
      tagOption: [
        {
          label: "标签1",
          value: "0",
        },
        {
          label: "标签2",
          value: "1",
        },
      ], // 标签
      rules: {
        remark: [
          { required: true, validator: nameValidate, trigger: "change" },
        ],
      },
      rowContent: null,
      weUserStr: "",
    };
  },
  created() {
    this.queryTaskList();
    this.queryDeptMsg();
  },
  methods: {
    handleSizeChange(val) {
      this.query.pageNum = 1;
      this.query.pageSize = val;
      this.queryTaskList()
    },
    handleCurrentChange(val) {
      this.query.pageNum = val;
      this.queryTaskList()
    },
    // 远程搜索任务名称 + 搜索
    queryTaskList() {
      let pageNum = this.query.pageNum || 1;
      let obj = {
        groupName: this.query.groupName,
        groupManager: this.query.groupManager,
        tag: this.query.tag,
        deptId: this.query.deptId,
        queryCreateList: this.query.queryCreateList,
        pageNum: this.query.pageNum,
        pageSize: this.query.pageSize,
        // sysUserId: [],
      };
      // this.weUserStr = "";
      // this.queryCreateList.forEach((item) => {
      //   obj.sysUserId = obj.sysUserId.concat(item);
      // });
      // queryTaskList(obj).then((res) => {
      //   console.log(res, " ------------res表格");
      //   if (res.code === 200 && res.rows.length) {
      //     this.tableList = res.rows;
      //     this.total = res.total;
      //   } else {
      //     this.total = 0;
      //     this.tableList = [];
      //   }
      // });
    },

    // 查询执行员工
    queryDeptMsg() {
      queryDeptMsg().then((res) => {
        if (res.code === 200 && res.data.length) {
          res.data.forEach((item) => {
            this.staffOptions.push({
              id: item.deptId,
              label: item.deptName,
              children: null,
            });
          });
        }
      });
    },

    // 懒加载 执行员工,创建人
    loadOptions({ action, parentNode, callback }) {
      queryUserMsg({ deptId: parentNode.id }).then((res) => {
        if (res.code === 200 && res.data.length) {
          parentNode.children = [];
          res.data.forEach((item) => {
            parentNode.children.push({
              id: item.userId,
              label: item.userName,
            });
          });
          callback();
        }
      });
    },

    selectOptions(obj) {
      // 执行员工
      this.queryCreateList = obj.select;
    },

    // 重置
    resetQuery() {
      this.query.friendName = "";
      this.query.wxNumber = "";
      this.query.friendNote = "";
      this.query.outfit = "";
      this.query.deptId = "";
      this.query.pageNum = 1;
      this.query.pageSize = 20;
      this.query.createList = [];
      this.queryTaskList();
    },

    // 创建欢迎语
    addGroup() {
      this.$router.push({
        name: "AddGroup",
      });
    },

    // 详情
    detail(row) {
      this.$router.push({
        name: "GroupDetail",
      });
    },

    // 编辑
    edit(row) {},

    // 删除
    cancel(row) {},
  },
};
</script>


<style lang='scss' scoped>
@import "../../../styles/base.scss";

.modules {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  padding: 0 20px;
  .module {
    width: 300px;
    height: 100px;
    background: #fafafa;
    border-radius: 4px;
    // border: 1px solid #eeeeee;
    .number {
      font-size: 18px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      // font-weight: bold;
      color: #393b44;
      text-align: center;
      margin-top: 30px;
    }
    .label {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #505050;
      text-align: center;
      margin-top: 8px;
    }
  }
}

.header-search-select {
  margin-left: 15px;
}

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9 !important;
}
</style>
